﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:url value="/car/info" var="carInfoUrl"/>
<c:url value="/car/delete" var="carDeleteUrl"/>

<script type="text/javascript">

function carInfo(carId) {
	
	var json = { carId: carId };
	$.ajax({
        url: "${carInfoUrl}",
        data: JSON.stringify(json),
        type: "POST",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
        },
        success: function(obj) {
        	$('#result').html("");
    		//var obj = JSON.parse(response);
    		$('#result').html("Car | Автомобиль: " + obj.carBrand +" "+ obj.color +"</br>State Number | Гос.номер: " + obj.stateNumber);
        },
        error: function(){
            alert('failure');
        }
    });
}

function carDelete(carId) {
	
	var json = { id: carId };
	$.ajax({
        url: "${carDeleteUrl}/" + carId + "/ajax",
        type: "POST",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
        },
        success: function(obj) {
        	if (obj) {
        		var tr = $("#c"+carId);
                tr.css("background-color","#FF3700");

                tr.fadeOut(400, function(){
                    tr.remove();
                });
                
        		$('#result').html("Deleted car: " + obj.carBrand + "  " + obj.color + " " + obj.stateNumber);
        	} else {
        		$('#result').html("Error");
        	}
    		
        },
        error: function(){
            alert('failure');
        }
    });
}
</script>

<h1>Список автомобилей: </h1>
 
<a href="<c:url value="/car/new" />">Добавить в список</a> 

<br/><br/>
<table id="carsTable" border="1" cellpadding="10" cellspacing="0" class="table table-striped table-bordered">
	<tr>
		<th>ID</th>
		<th>Марка</th>
		<th>Цвет </th>
		<th>Гос. номер </th>
		<th>Цена 1 суток аренды, $ </th>
		<th></th>
	</tr>
	
	<c:forEach items="${cars}" var="car">
		<c:url value="/car/${car.carId}" var="viewCarUrl"/>
		
		<tr id="c${car.carId}">
		    <td>${car.carId}</td>
		    <td><a href="${viewCarUrl}">${car.carBrand}</a></td>
		    <td>${car.color}</td> 
		    <td><a href="${viewCarUrl}">${car.stateNumber}</a></td>
		    <td>${car.priceOfRentPer24Hours}  &nbsp;  &nbsp;</td>
		    
		    
		    <td>
		    	<a href="<c:url value="/car/edit/${car.carId}" />"> Edit </a> &nbsp;
		    	<a href="<c:url value="/car/delete/${car.carId}" />"> Delete </a>
		   	</td>
		   	<td>
		    	<span onclick="carInfo(${car.carId})">Car Info (ajax)</span> <br/>
		    	<span onclick="carDelete(${car.carId})">Car Delete (ajax)</span> 
		   	</td>
	   	</tr>
	</c:forEach>
</table>

<div id="result"></div>
 
